<template>
  <a-button
    v-if="showButton"
    @click="openLogModal"
    :type="type || 'default'"
    :class="className"
    size="small"
    :disabled="isdisabled"
  >
    <slot>日志</slot>
  </a-button>
  <a-modal
    v-bind="$props"
    width="min(90%,1000px)"
    v-model:visible="visible"
    @cancel="close"
    :footer="null"
  >
    <template #title>
      <div class="d-flex-modal-title">
        <div>
          日志
          <div
            v-if="recordType === 2"
            style="font-size: 12px; color: rgba(0, 0, 0, 0.55)"
          >
            (历史日志为6个月前大数据中心归档日志，获取会相对慢一些，请耐心等待。)
          </div>
        </div>
        <div>
          <a-button v-if="recordType === 1" type="link" @click="handleHistory">
            历史日志
          </a-button>

          <a-button v-else type="link" @click="getCurrentLog">
            <RollbackOutlined />当前日志
          </a-button>
        </div>
      </div>
    </template>
    <a-table
      :columns="columns"
      :data-source="tableData"
      size="small"
      :pagination="false"
      :row-key="(record, index) => index"
      bordered
    >
      <template #updateDetail="{ record }">
        <div
          v-if="record.updateDetail"
          v-html="parseText(record.updateDetail)"
        ></div>
        <div v-if="record.ossUrl">
          <a-button @click.prevent="download(record.ossUrl)">
            <upload-outlined></upload-outlined>
            点击下载变更excel
          </a-button>
        </div>
      </template>
    </a-table>
  </a-modal>
</template>
<script>
import { reactive, toRefs, inject, watch, watchEffect } from 'vue'
import fetchApply from './../server/axios.js'
import { UploadOutlined, RollbackOutlined } from '@ant-design/icons-vue'
import { downloadFile } from 'utils/file.js'
export default {
  emits: ['closeLog', 'update:loadLog'],
  components: {
    UploadOutlined,
    RollbackOutlined
  },
  props: {
    className: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    showButton: {
      type: Boolean,
      default: true
    },
    loadLog: {
      type: Boolean,
      default: false
    },
    logParams: null,
    isdisabled: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const logParams = props.logParams || inject('logParams') // {}

    const state = reactive({
      visible: false,
      recordType: 1,
      tableData: [],
      columns: [
        {
          title: '变更内容',
          key: 'updateDetail',
          width: '320px',
          slots: { customRender: 'updateDetail' }
        },
        {
          title: '部门',
          key: 'department',
          dataIndex: 'department',
          ellipsis: true,
          width: '150px'
        },
        {
          title: '执行人',
          key: 'operUserName',
          dataIndex: 'operUserName',
          ellipsis: true,
          width: '100px'
        },
        {
          title: '更新时间',
          key: 'gmtCreate',
          dataIndex: 'gmtCreate',
          ellipsis: true,
          width: '180px'
        }
      ]
    })
    const openLogModal = () => {
      state.visible = true
    }
    const parseText = text => {
      return text
        .replaceAll(/\n/g, '<br>')
        .replaceAll(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')
    }
    const close = () => {
      state.visible = false
      emit('update:loadLog', false)
      emit('closeLog', false)
    }
    const download = url => {
      downloadFile(url)
    }
    // 历史日志
    const handleHistory = async () => {
      state.recordType = 2
      fetchApply('/bizLog/get-history-biz-logs', logParams).then(res => {
        state.tableData = res.data || []
      })
    }
    const getCurrentLog = async () => {
      state.recordType = 1
      fetchApply('/bizLog/get-biz-logs', logParams).then(res => {
        state.tableData = res.data || []
      })
    }
    watch(
      () => props.loadLog,
      cur => {
        if (cur) {
          state.visible = true
        }
      }
    )
    watchEffect(() => {
      if (state.visible) {
        state.tableData = []
        getCurrentLog()
      }
    })
    return {
      ...toRefs(state),
      handleHistory,
      openLogModal,
      close,
      download,
      parseText,
      getCurrentLog
    }
  }
}
</script>

<style scoped>
.d-flex-modal-title {
  display: flex;
  width: calc(100% - 30px);
  justify-content: space-between;
}
</style>
